<!-- 
    1.本界面是老师出勤管理的解密
    2.上传图片并且选择教学班级
    3.显示出勤人数
    4.显示出勤人员的名单，（用表格表示）
    5.显示未出勤人员的名单
 -->

<!DOCTYPE html>
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学生出勤管理</title>

    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/teacher_attendance.css' %}">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">智慧教室管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img"> <span id="username"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user_center/">个人中心</a></dd>
                    <dd><a href="/logout/">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

     <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/teareserve/">教师预约</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/teacher_attendance_index/">学生出勤管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/table/">查看课表</a>
                </li>
            </ul>
        </div>
    </div>

        <div class="layui-body">

            <div class="basicInfoHeader">
                <p>学生考勤管理</p>
            </div>
            <!-- 上传用户信息文件的按钮 -->
            <blockquote class="selectBox">
                <p>
                    拍照并上传班级图片，等待人脸识别
                </p>
                {% csrf_token %} {#如果不加这个，程序会报错#}
                <div id="demo2" class="xm-select-demo"style="width: 200px;float: left; margin-right: 20px;"></div>
                <script src="{%static 'xm-select.js'%}"></script>
                <script src="{%static 'jquery/jquery-3.2.1.js'%}"></script>
                <button type="button" class="layui-btn"
                         id="demo2-getValue">获取选中值</button>
                <script>
                var demo2 = xmSelect.render({
                    el: '#demo2',
                    data: [
                        {name: '计科191', value: 1},
                        {name: '计科192', value: 2},
                        {name: '计科193', value: 3},
                        {name: '计科194', value: 4},
                        {name: '信安191', value: 5},
                        {name: '信安192', value: 6},
                        {name: '物联191', value: 7},
                        {name: '物联192', value: 8},
                        {name: '通信191', value: 9},
                        {name: '通信192', value: 10},
                        {name: '通信193', value: 11},
                        {name: '通信194', value: 12},
                    ]
                })
                document.getElementById('demo2-getValue').onclick = function(){
	            //获取当前多选选中的值
	            var selectArr = demo2.getValue();
                $.ajax({
                             url: "/get_class/",
                             type: "post",
                             traditional:true,
                             data:
                                 {
                                     'classnum': JSON.stringify(selectArr)
                                 }
                                 ,
                             dataType: "json",

                })
                console.log(selectArr);
                console.log('12345')
                console.log(type(selectArr));
                console.log('12345')
	            document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + JSON.stringify(selectArr, null, 2);
                }
                </script>
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
{#                <button id="downData" type="onclick" class="layui-btn btn " onclick="downData();">#}
{#                    <span class="glyphicon glyphicon-share" aria-hidden="true"></span>下载出勤名单#}
{#                </button>#}
            </blockquote>

            <!-- 显示已经出勤名单 -->
            <div class="attendRecord">
                <fieldset class="layui-elem-field">

                    <div id="resContainer"></div>
                    <div id="resContainer1" ></div>
{#                    <div>#}
{#                        <p style="text-align: center;">出勤名单</p>#}
{#                    </div>#}
{#                    <div class="recordTableBox">#}
{#                        <table lay-filter="recordTable" id="attendanceTable"></table>#}
{#                        <table lay-filter="recordTable">#}
{#                            <thead>#}
{#                                <tr>#}
{#                                    <th lay-data="{field:'id',fixed: 'center'}">ID</th>#}
{#                                    <th lay-data="{field:'name'}">学生姓名</th>#}
{#                                    <th lay-data="{field:'userId'}">学号</th>#}
{#                                    <th lay-data="{field:'college'}">学院</th>#}
{#                                    <th lay-data="{field:'class'}">班级</th>#}
{#                                </tr>#}
{#                            </thead>#}
{#                            <tbody>#}
{#                            <script> var stuList </script>#}
{#                            {% for stu in stuList %}#}
{#                                <tr>#}
{#                                    <td>{{ stu.uid }}</td>#}
{#                                    <td>{{ stu.name }}</td>#}
{#                                    <td>{{ stu.sid }}</td>#}
{#                                    <td>{{ stu.college }}</td>#}
{#                                    <td>{{ stu.class_field }}</td>#}
{#                                </tr>#}
{#                            {% endfor %}#}
{#                            </tbody>#}
{#                        </table>#}
{#                    </div>#}
                </fieldset>
            </div>
            <!-- 显示未出勤名单 -->
{#            <div class="absentRecord">#}
{#                <fieldset class="layui-elem-field">#}
{#                    <div>#}
{#                        <p style="text-align: center;">未出勤名单</p>#}
{#                    </div>#}
{#                    <div class="recordTableBox">#}
{#                        <table lay-filter="recordTable">#}
{#                            <thead>#}
{#                                <tr>#}
{#                                    <th lay-data="{field:'id',fixed: 'center'}">ID</th>#}
{#                                    <th lay-data="{field:'name'}">学生姓名</th>#}
{#                                    <th lay-data="{field:'userId'}">学号</th>#}
{#                                    <th lay-data="{field:'college'}">学院</th>#}
{#                                    <th lay-data="{field:'class'}">班级</th>#}
{#                                </tr>#}
{#                            </thead>#}
{#                            <tbody>#}
{#                                <tr>#}
{#                                    <td>1</td>#}
{#                                    <td>张三</td>#}
{#                                    <td>41924111</td>#}
{#                                    <td>计通</td>#}
{#                                    <td>计科191</td>#}
{#                                </tr>#}
{##}
{#                                <tr>#}
{#                                    <td>2</td>#}
{#                                    <td>李四</td>#}
{#                                    <td>41924112</td>#}
{#                                    <td>计通</td>#}
{#                                    <td>计科191</td>#}
{##}
{#                                </tr>#}
{#                                <tr>#}
{#                                    <td>3</td>#}
{#                                    <td>王二</td>#}
{#                                    <td>41924113</td>#}
{#                                    <td>计通</td>#}
{#                                    <td>计科191</td>#}
{#                                </tr>#}
{#                            </tbody>#}
{#                        </table>#}
{#                    </div>#}
{#                </fieldset>#}
{#            </div>#}

        </div>

    </div>
    <script src="{%static 'layui/layui.js'%}"></script>
    <script>

        //JS 
        layui.use(['element', 'layer', 'util'], function() {
            var element = layui.element,
                layer = layui.layer,
                util = layui.util,
                $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function(othis) {
                    layer.msg('展开左侧菜单的操作', {
                        icon: 0
                    });
                },
                menuRight: function() {
                    layer.open({
                        type: 1,
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt' //右上角
                            ,
                        anim: 5,
                        shadeClose: true
                    });
                }
            });

        });
        var table = layui.table;
        //转换静态表格
        table.init('recordTable', {
            height: 315,
            limit: 100,
            page: true
        });
        //转换静态表格
        table.init('classroomTable', {
            height: 315,
            limit: 100,
            page: true
        });

    </script>



<script src="{%static 'layui/layui.js'%}"></script>
<script>

layui.use('upload', function(){
  var upload = layui.upload;
  $ = layui.$   //注意要定义$,该符号不是jQuery中的$
    var locate = document.getElementById("resContainer");
    var locate1 = document.getElementById("resContainer1");
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口,需要在views.py中配置这个接口
    ,data:{ //需要上传这个data，不然程序也会报错
        'csrfmiddlewaretoken':function(){
            return $(':input:first').val()
        }
      }
      ,done: function(res){
      //上传完毕回调
          console.log("ok",res);
          var i = new Image(); //新建image对象，从而将文件url转换为图片
          {#i.src = res.data.img_path;#}
          i.src = res.img_path;
          i.style="width: 800px;height:auto"
          // document.body.appendChild(i);//将后端返回的图片加入到页面中
          content = "出勤人数有"+res.total+"人";
          locate.append(content);
          locate1.append(i)
          //获取表格需要的数据
          stuList=res.data;
          console.log(stuList)
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
<script>
    //判断当前登录的是谁
    $.ajax({
                url: "/user/",
                method: "get",
                success: function (response) {
                    if(response.msg === 'ok'){
                        $("#username").html(response.data.username)
                    } else {
                        window.location.href = '/login'
                    }
                },
                error: function (err) {
                    window.location.href = '/login'
                }
        })
</script>
</body>

</html>